<!-- 订单详情 -->
<template>
	<view class="container">
		<view class="cu-bar bg-white solid-bottom">
			<view class="action">
				<text class="cuIcon-title text-orange "></text> 我的购物车
			</view>
		</view>
		<view v-show="goodsList.length<=0" style="padding-left: 20vw;font-size: 30rpx;">购物车里还没有商品哦!快去选购吧!</view>
		<!-- 滚动区域 -->
		<scroll-view v-show="goodShow" :scroll-top="scrollTop" scroll-y="true"
			style="height: 75vh;margin: 0;padding: 0;" @scroll="scroll" scroll-with-animation="true">
			<view class="cu-list menu-avatar" v-for="(item2,index) in goodsList" :key="index">
				<view class="item">
					<uni-row class="demo-uni-row">
						<uni-col :span="11">
							<view class="demo-uni-col dark" style="width: 160rpx;height: 160rpx;">
								<image :src="item2.introduceImage" class="image_wrapper" mode="aspectFit"></image>
							</view>
						</uni-col>
						<uni-col :span="13">
							<view class="demo-uni-col light">
								<span style="color: #007AFF;">{{item2.name}}</span>
								<view class="describe">数量：<span>{{item2.quantity}}</span></view>
								<view class="describe">单价：{{item2.price}}元</span></view>
								<view class="money">总价格：{{item2.price * item2.quantity}}元</view>
							</view>
						</uni-col>
						<!-- <uni-col :span="6">
							<view class="demo-uni-col light">
								<button style="height: 85rpx;width: 100rpx;" type="primary"
									@click="subtractNumber(item2)">-</button>
								<button style="height: 85rpx;width: 100rpx;" type="primary"
									@click="addNumber(item2)">+</button>
							</view>
						</uni-col> -->
					</uni-row>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		name: 'shopsComponent',
		props: {
			goodsList: {
				type: Array
			}
		},
		data() {
			return {
				// 底部导航栏选中样式
				barClassShow: 'action text-orange',
				barClass: 'action text-gray',
				goodShow: true,
				shopShow: false,
				scrollHeight: '400px',
				leftArray: [],
				mainArray: [],
				leftIndex: 0,
				goodsType: [],
				goodList: [],
				// 购物车列表
				shopGoods: [],
				scrollTop: 0,
				old: {
					scrollTop: 0
				},
			}
		},
		mounted() {
			this.initScrollView()
		},
		computed: {},
		methods: {
			// 添加商品数量
			addNumber(good) {
				good.quantity++
				let addFlag = true
				this.shopGoods.forEach(item => {
					// 如果id存在了就不添加 否则都添加
					if (item.id == good.id) {
						addFlag = false
					}
				})
				if (addFlag) {
					this.shopGoods.push(good)
				}
			},
			// 减少商品数量
			subtractNumber(good) {
				// 调用父组件方法
				// this.$parent.subtractNumber(good)
				// 使用$parent不兼容H5也不支持WX小程序
				this.$emit('subtractNumber', good)

			},
			//展示商品列表 
			showGoods() {
				this.goodShow = true;
				this.shopShow = false;
			},
			// 展示购物车列表
			showShops() {
				this.goodShow = false;
				this.shopShow = true;
			},
			/* 初始化滚动区域 */
			initScrollView() {
				return new Promise((resolve, reject) => {
					let view = uni.createSelectorQuery().select('.scroll-panel');
					view.boundingClientRect(res => {
						this.scrollHeight = `${res.height}px`;
						this.$nextTick(() => {
							resolve();
						})
					}).exec();
				});
			},
			/* 获取列表数据 */
			getListData() {
				this.getTypes();
				// 发送登录请求
				new Promise((resolve, reject) => {
					/* 因无真实数据，当前方法模拟数据。正式项目中将此处替换为 数据请求即可 */
					uni.showLoading();
					setTimeout(() => {
						/* 因无真实数据，当前方法模拟数据 */
						let [left, main] = [
							[],
							[]
						];
						for (let i = 0; i < this.goodsType.length; i++) {
							left.push(this.goodsType[i].value);
							let list = [];
							this.getgoodsByType(this.goodsType[i].id, function(res) {
								for (let j = 0; j < res.length; j++) {
									list.push(res[j]);
								}
							})
							main.push({
								title: `第${i+1}类商品标题`,
								list
							})
						}
						resolve({
							left,
							main
						});
					}, 1000);
				}).then((res) => {
					uni.hideLoading();
					this.leftArray = res.left;
					this.mainArray = res.main;
				});
			},
			/* 左侧导航点击 */
			leftTap(e) {
				let index = e.currentTarget.dataset.index;
				this.leftIndex = Number(index);
			},
			// 根据商品大类id获取商品
			async getgoodsByType(typeId, fn) {
				const that = this
				await uni.request({
					url: that.$serverApi + "/applet/commodity/listCommodity?typeId=" + typeId,
					method: "GET",
					header: {
						//返回数据类型
						"content-type": " application/json; charset=utf-8",
						//设置用户访问的token信息
						"Authorization": uni.getStorageSync("token")
					},
					success: res => {
						if (res.data.code == 200) {
							if (fn) {
								fn(res.data.data)
							}
						} else {}
					},
					fail: res => {}
				})
			},
			// 获取商品大类
			async getTypes() {
				await uni.request({
					url: this.$serverApi + "/applet/type/listAllType",
					method: "GET",
					data: {},
					header: {
						//返回数据类型
						"content-type": " application/json; charset=utf-8",
						//设置用户访问的token信息
						"Authorization": uni.getStorageSync("token")
					},
					success: res => {
						if (res.data.code == 200) {
							this.goodsType = res.data.data
						} else {}
					},
					fail: res => {}
				})
			},
			/* 轮播图切换 */
			swiperChange(e) {
				let index = e.detail.current;
				this.leftIndex = Number(index);
			},
			scroll: function(e) {
				this.old.scrollTop = e.detail
					.scrollTop //滚动时触发，event.detail = {scrollLeft, scrollTop, scrollHeight, scrollWidth, deltaX, deltaY}
			},
		}
	}
</script>

<style lang="scss">
	page,
	.container {
		height: 100%;
	}

	.goodTable {
		margin-bottom: 30rpx;
	}

	/* 容器 */
	.container {
		display: flex;
		flex-direction: column;
		flex-wrap: nowrap;
		justify-content: flex-start;
		align-items: flex-start;
		align-content: flex-start;

		&>view {
			width: 100%;
		}

		.scroll-panel {
			flex-grow: 1;
			height: 0;
			overflow: hidden;
		}

		.bottom-panel {
			padding-bottom: 0;
			padding-bottom: constant(safe-area-inset-bottom);
			padding-bottom: env(safe-area-inset-bottom);
		}
	}

	.image_wrapper {
		width: 150rpx;
		height: 150rpx;
		margin: 0 auto;

		.img {
			width: 100%;
			height: 100%;
		}
	}

	.list-box {
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		justify-content: flex-start;
		align-items: flex-start;
		align-content: flex-start;
		font-size: 28rpx;

		.left {
			width: 200rpx;
			background-color: #f6f6f6;
			line-height: 80rpx;
			box-sizing: border-box;
			font-size: 32rpx;

			.item {
				padding-left: 20rpx;
				position: relative;

				&:not(:first-child) {
					margin-top: 1px;

					&::after {
						content: '';
						display: block;
						height: 0;
						border-top: #d6d6d6 solid 1px;
						width: 620upx;
						position: absolute;
						top: -1px;
						right: 0;
						transform: scaleY(0.5);
						/* 1px像素 */
					}
				}

				&.active,
				&:active {
					color: #42b983;
					background-color: #fff;
				}
			}
		}

		.main {
			background-color: #fff;
			padding-left: 20rpx;
			width: 0;
			flex-grow: 1;
			box-sizing: border-box;

			.swiper {
				height: 500px;
			}

			.title {
				line-height: 64rpx;
				font-size: 24rpx;
				font-weight: bold;
				color: #666;
				background-color: #fff;
				position: sticky;
				top: 0;
				z-index: 999;
			}

			.item {
				padding-bottom: 10rpx;
			}

			.this.goods {
				display: flex;
				flex-direction: row;
				flex-wrap: nowrap;
				justify-content: flex-start;
				align-items: center;
				align-content: center;
				margin-bottom: 10rpx;

				&>image {
					width: 120rpx;
					height: 120rpx;
					margin-right: 16rpx;
					margin-left: 2px;
				}

				.describe {
					font-size: 24rpx;
					color: #999;
				}

				.money {
					font-size: 24rpx;
					color: #efba21;
				}
			}
		}
	}

	.image_wrapper {
		background-size: cover;
		width: 100%;
		height: 100%;
	}
</style>
